<!--  -->
<template>

    <div>aaa</div>
  <div class="box">子组件{{ msg }}

  <div>
     {{ formatString(str) }}
  </div>
  
    <button @click="send">给父组件传值</button>
  </div>


</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,defineProps} from 'vue'

const str=ref("hello");

const formatString=(str:string)=>{
  return str.toUpperCase();
}

const props=defineProps({
    sendHandle:Function
})

const msg=ref("");

const say=()=>{
   alert("父组件调用子组件方法");
}

const send=()=>{

    props.sendHandle && props.sendHandle("你好");
   
}

defineExpose({ msg,say})
</script>
<style scoped>
.box
{
  background-color: skyblue;
  width: 500px;
    height: 300px;
}
</style>